<template>
  <el-upload
    v-model:file-list="imageFile"
    :http-request="httpRequest"
    list-type="picture-card"
    :auto-upload="true"
    accept=".jpg,.jpeg,.png,.gif"
  >
    <el-icon>
      <Plus />
    </el-icon>
    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>

          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" />
  </el-dialog>
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref, watch, computed, nextTick } from "vue";

const baseURL = import.meta.env.VITE_BASE_URL;
import { ElMessage, ElLoading } from "element-plus";
import service from "@/utils/system/request";
import { closeLoading, showLoading, showSuccessToast } from "@/utils/common";
import md5 from "js-md5";

const emit = defineEmits(["uploadImagesFn"]);
const props = defineProps(["imageFile", "fileList"]);
const fileList = ref([]);
const imageFile = ref([]);
watch(
  () => props.fileList,
  newVal => {
    imageFile.value = [];
    fileList.value = props.fileList;
    console.log(props.fileList);
    if (props.fileList.length > 0) {
      for (let item of props.fileList) {
        imageFile.value.push({
          name: item,
          url: item
        });
      }
    }
    console.log(imageFile, "轮播图");
    console.log(newVal, "轮播图12");
  },
  { deep: true }
);

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const handleRemove = file => {
  console.log(file.url, "1");
  console.log(fileList.value, "1");
  const index = fileList.value.findIndex(item => item === file.url);
  console.log(index, 1);

  fileList.value.splice(index, 1);
};

const handlePictureCardPreview = file => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

const httpRequest = options => {
  // const formData = new FormData(); //我是用FormData() 来 进行弄 上传文件的 二进制文件
  // formData.append("fileData", options.file);
  showLoading("Uploading");
  let newfile = options.file;
  newfile = new File(
    [options.file],
    `${md5(newfile.name)}.${newfile.type.split("/").pop().toLowerCase()}`
  );
  newfile.uid = options.file.uid; // new File 没有uid属性，会导致组件底层报错，这里手动加上
  // console.log(newfile)
  const formData = new FormData(); //我是用FormData() 来 进行弄 上传文件的 二进制文件
  formData.append("fileData", newfile);
  let fileListV2 = [];
  service.post(`admin/upload/image`, formData).then(({ code, data }) => {
    closeLoading();
    if (code === 0) {
      showSuccessToast("上传成功");
      // imageFile.value.push({
      //   name: data,
      //   url: data
      // });
      fileListV2 = [...fileList.value, data];
      console.log(imageFile.value);
      console.log(fileListV2, "12222222222222222");
      // url.value = data;
      // fileList.value.push(data);
      emit("uploadImagesFn", fileListV2);
      console.log(data);
    }
  });
};
</script>

<style lang="scss" scoped>
:deep(.avatar-uploader .avatar) {
  width: 120px;
  height: 100px;
  display: inline-block;
}

:deep(.el-upload__tip) {
  margin: 0;
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  width: 120px;
  height: 120px;
  text-align: center;
  position: absolute;
  left: 0;
  line-height: 120px;
}

:deep(.avatar-uploader .el-upload) {
  border: 2px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 120px;
  height: 120px;
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
  color: #7e9cff !important;

  .avatar-uploader-icon {
    color: #7e9cff !important;
  }
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  background: red;
}

.previewImage {
  min-width: 120px;
  max-width: 220px;
  max-height: 120px;
  border-radius: 6px;
}
</style>
